<script setup>
import { Pointer, Star } from '@element-plus/icons-vue'
</script>

<template>
  <div class="blog-item">
    <!-- 左侧显示文章一些信息 -->
    <div class="left">
      <el-text class="title" truncated>
        鸿蒙OS起步照官网练习创建第一页面和跳转的第二页面需要注意的点
      </el-text>
      <div class="content">
        鸿蒙OS起步照官网练习创建第一页面和跳转的第二页面需要注意的点
        鸿蒙OS起步照官网练习创建第一页面和跳转的第二页面需要注意的点
      </div>

      <div class="bottom">
        <div class="author-info">
          <span class="author-name">海风追潮汐</span>
          <div class="others-info">
            <div class="line">
              <el-icon><Star /></el-icon>
              <span>100</span>
            </div>
            <div class="line">
              <el-icon><Pointer /></el-icon>
              <span>100</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧显示文章封面 -->
    <div class="right">
      <img src="/public/images/loginbg0.png" alt="" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.blog-item {
  width: 100%;
  padding: 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;

  &:hover {
    background-color: #f5f5f5;
    border-radius: 5px;
  }

  .left {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    .title {
      align-self: start;
      display: block;
      font-family: Roboto;
      font-size: 16px;
      font-weight: 600;
      line-height: 28px;
      letter-spacing: normal;
      color: #000000;

      &:hover {
        color: #4e91f9;
        cursor: pointer;
      }
    }

    .content {
      font-size: 14px;
      color: #bababa;

      /* 多行省略 */
      display: -webkit-box;
      -webkit-line-clamp: 1; /* 显示1行，超出省略 */
      line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        cursor: pointer;
      }
    }

    .bottom {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      .author-info {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #a6a6a6;
        &:hover {
          color: #4e91f9;
          cursor: pointer;
        }
      }
      .others-info {
        margin-left: 10px;
        border-left: 1px solid #ccc;
        padding-left: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #a6a6a6;
        gap: 10px;
        .line {
          margin-right: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
  }

  .right {
    padding: 8px;
    flex: 1;
    height: 100px;
    border-radius: 5px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      object-fit: cover;
    }
  }
}
</style>
